<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .closeIcon {
            width: 20px;
            height: 20px;
            position: absolute;
            right: 0;
            cursor: pointer;
        }

        .rotationChartImgDiv {
            position: relative;
            display: inline-block;

        }

        /*#rotationChartImgList {*/
        /*    margin-left: 110px;*/
        /*}*/

        .rotationChartImg {
            width: 116px;
            height: 122px;
            border: 1px solid #b4b2b2;
            padding: 7px;
        }
        ::-webkit-scrollbar-thumb{
            background-color: #009688;
        }
    </style>
</head>
<body>
<div class="layui-tab-content">
    <div class="layui-tab-item layui-show" id="withdrawalDiv">

        <div class="layui-tab" id="withdrawalTab" lay-filter="withdrawalTab">
            <ul class="layui-tab-title">
                <li class="layui-this">全部</li>
                <li data-status="0">待审核</li>
                <li data-status="1">已拒绝</li>
                <li data-status="2">待转账</li>
                <li data-status="3">已转账</li>
            </ul>
        </div>


        <div class="layui-form-item layui-form-text">
            <div class="layui-input-inline" style="width: 300px;margin-right: 10px">
                <input type="text" id="withdrawalSearchShopName" placeholder="店铺名称" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline" style="width: 300px;margin-right: 10px">
                <input type="text" id="withdrawalSearchPhone" placeholder="电话" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button type="submit" class="layui-btn" id="withdrawalSearch">搜索</button>
            </div>
        </div>
        <table class="layui-hide" lay-filter="withdrawalTable" id="withdrawalTable"></table>
    </div>
</div>
</body>
<script th:replace="/common/template :: script"></script>
<script type="text/html" id="showTicketLog">
    <div class="layui-tab-content" id="showTicketLogDiv" >
        <div class="layui-input-inline">
            <label class="layui-form-label" style="text-align: left">选择日期:</label>
            <input style="width: 200px;display: inline-block;margin-right: 20px;" type="text" class="layui-input"
                   name="showTicketLogDate" id="showTicketLogDate"
                   placeholder=" - ">
            <button type="submit" class="layui-btn" id="showTicketLogSearch">搜索</button>
        </div>
        <table class="layui-hide" id="showTicketLogTable" lay-filter="showTicketLogeTable"></table>

        <div style="width:300px;margin: auto">
            <button class="layui-btn layui-btn-normal" id="showTicketAdopt">通过</button>
            <button class="layui-btn layui-btn-danger" id="showTicketCancel">拒绝</button>
            <button class="layui-btn layui-btn-primary" id="showTicketClose">取消</button>
        </div>

    </div>
</script>
<script type="text/html" id="transfer">
    <div style="margin-bottom: 20px">
        <label style="width: 100px;margin-top: 10px" class="layui-form-label">上传转账凭证:</label>
        <br/>
        <!--        <button type="button" class="layui-btn" id="updateCredentialImgBtn">上传凭证</button>-->
        <div class="layui-upload-list" id="rotationChartImgList">
            <img src="/images/uploadIcon.png" style="cursor: pointer" id="updateCredentialImgBtn">
        </div>
    </div>
    <div style="width:300px;margin: auto;text-align: center">
        <button class="layui-btn" id="transferAdopt" style="margin-right: 20px">确认</button>
        <button class="layui-btn layui-btn-primary" id="transferClose">取消</button>
    </div>
</script>
<script th:inline="javascript">
    layui.use(['element', 'form', 'upload', 'laydate', 'table', 'form', 'jquery'], function () {
        var form = layui.form;
        var element = layui.element;
        var laydate = layui.laydate;
        var table = layui.table;
        var upload = layui.upload;
        var $ = layui.jquery;
        var status;

        table.render({
            elem: '#withdrawalTable'
            , url: '/withdrawal'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                  {field: 'shopName', title: '店铺名称', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'phone', title: '电话', align: 'center'}
                , {field: 'withdrawalMoney', title: '提现金额', align: 'center'}
                , {field: 'withdrawalDate', title: '申请时间', align: 'center'}
                , {field: 'examineDate', title: '审核时间', align: 'center'}
                , {field: 'transferDate', title: '转账时间', align: 'center'}
                , {
                    field: 'status', title: '状态', align: 'center', templet: function (d) {
                        var str;
                        var status = d.status;
                        if (status == 0) {
                            str = "<div>待审核</div>"
                        } else if (status == 1) {
                            str = "<div>已拒绝</div>"
                        } else if (status == 2) {
                            str = "<div>待转账</div>"
                        } else if (status == 3) {
                            str = "<div>已转账</div>"
                        }
                        return str;
                    }
                }
                , {field: 'examinePeopleName', title: '审核人', align: 'center'}
                , {
                    title: '操作', align: 'center', templet: function (d) {
                        var str = '';
                        var status = d.status;
                        if (status == 0) {
                            str = "<a  data-shop-id = '" + d.shopId + "' data-id='" + d.withdrawalId + "' href='javascript:void(0)' class='layui-btn layui-btn-sm withdrawalBtn'>查看</a>"
                        } else if (status == 2) {
                            str = "<a  data-id='" + d.withdrawalId + "' href='javascript:void(0)' class='layui-btn layui-btn-sm transferBtn'>设为已转账</a>"
                        }
                        return str;
                    }
                }
            ]]
            , page: true
        });


        //搜索
        $('#withdrawalSearch').click(function () {
            var shopName = $('#withdrawalSearchShopName').val();
            var phone = $('#withdrawalSearchPhone').val();
            table.reload('withdrawalTable', {where: {shopName: shopName, phone: phone, status: status}})
        })

        //tab 切换
        element.on('tab(withdrawalTab)', function (data) {
            status = data.index == 0 ? null : data.index - 1;
            table.reload('withdrawalTable', {where: {status: status}})
        });

        //查看按钮
        $('#withdrawalDiv').on('click', '.withdrawalBtn', function () {
            var id = $(this).attr("data-id");
            var shop_id = $(this).attr("data-shop-id");
            var index = layer.open({
                type: 1,
                area: '800px',
                offset: 0.8,
                maxmin: true,
                title: '查看核销记录',
                content: $('#showTicketLog').html(),
                success: function () {

                    //时间区间
                    laydate.render({
                        elem: '#showTicketLogDate'
                        , trigger: 'click'
                        , range: true
                    });
                    //table表格
                    table.render({
                        elem: '#showTicketLogTable'
                        , url: '/withdrawal/ticketLog/' + shop_id
                        , page: true
                        , totalRow: true
                        , cols: [[
                            {field: 'serviceTypeName', title: '服务券类型', totalRowText: '合计', align: 'center'}
                            // ,{field: 'ticketId', title: '服务券类型', align: 'center'}//
                            , {field: 'licensePlate', title: '车牌', align: 'center'}
                            , {field: 'verificationTime', title: '服务日期', align: 'center'}
                            , {field: 'verificationIntegral', totalRow: true, title: '积分', sort: true, align: 'center'}
                            , {field: 'verificationMoney', totalRow: true, title: '金额', sort: true, align: 'center'}
                        ]]
                    });
                    //搜索
                    $('#showTicketLogSearch').click(function () {
                        var date = $('#showTicketLogDate').val();
                        table.reload('showTicketLogTable', {where: {date: date}})
                    })

                    function examine(status, refuseReason) {
                        $.ajax({
                            url: '/withdrawal/updateExamineStatus',
                            method: 'Post',
                            data: {id: id, status: status, refuseReason: refuseReason},
                            success: function (res) {
                                layer.closeAll();
                                if (res.code == 200) {
                                    layer.msg(res.msg, {icon: 1});
                                    table.reload('withdrawalTable')
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }
                        })
                    }

                    $('#showTicketLogDiv').on('click', '#showTicketAdopt', function () {
                        //通过按钮
                        layer.confirm('确定审核通过吗？', {
                            offset: '65px',
                            skin: 'layui-layer-admin'
                        }, function (i) {
                            examine(2)
                        })
                    })

                    $('#showTicketLogDiv').on('click', '#showTicketCancel', function () {
                        //拒绝按钮
                        // <textarea type='text' id='refuseReason' />
                        var str = "<div class=\"layui-form-item layui-form-text\">\n" +
                            "            <label class=\"layui-form-label\">拒绝原因:</label>\n" +
                            "            <div class=\"layui-input-block\">\n" +
                            "                <textarea style='width: 300px' name=\"refuseReason\" id=\"refuseReason\" placeholder=\"请输入拒绝原因\"\n" +
                            "                          class=\"layui-textarea\"></textarea>\n" +
                            "            </div>\n" +
                            "        </div>";
                        layer.confirm(str, {btn: ['确定', '取消'], area: ['450px', '260px'], title: "提示"}, function () {
                            var refuseReason = $("#refuseReason").val();
                            if (refuseReason == null || refuseReason == undefined || refuseReason == '') {
                                layer.msg('请输入拒绝原因', {icon: 2});
                            } else {
                                examine(1, refuseReason)
                            }
                        })
                    })

                    $('#showTicketLogDiv').on('click', '#showTicketClose', function () {
                        //取消按钮
                        layer.close(index);
                    })

                }
            })

        })
        //转账
        $('#withdrawalDiv').on('click', '.transferBtn', function () {
            var id = $(this).attr("data-id");
            var index = layer.open({
                type: 1,
                area: ['420px', '290px'],
                maxmin: true,
                title: '提示',
                content: $('#transfer').html(),
                success: function () {
                    //转账
                    var credentialFile = null;
                    upload.render({
                        elem: '#updateCredentialImgBtn'
                        , auto: false				//不自动上传设置
                        , choose: function (obj) {
                            //预读本地文件示例，不支持ie8
                            obj.preview(function (index, file, result) {
                                credentialFile = file;
                                $('#rotationChartImgList').append('<div class="rotationChartImgDiv">\n' +
                                    '                        <img src="/images/close.png" class="closeIcon">\n' +
                                    '                        <img src="' + result + '" alt="' + file.name + '" class="rotationChartImg">\n' +
                                    '                    </div>')
                                $('#updateCredentialImgBtn').hide()
                            });
                        }
                    });
                    $('#rotationChartImgList').on('click', '.closeIcon', function () {
                        $(this).parent().remove();
                        credentialFile = null;
                        $('#updateCredentialImgBtn').show()
                    })

                    $('#transferAdopt').click(function () {
                        if (credentialFile === null || credentialFile === undefined) {
                            layer.msg('请上传转账凭证', {icon: 2});
                        }
                        var form = new FormData();
                        form.append("file", credentialFile);
                        form.append("id", id);
                        $.ajax({
                            url: '/withdrawal/updateTransferStatus',
                            method: 'Post',
                            data: form,
                            // 告诉jQuery不要去处理发送的数据
                            processData: false,
                            // 告诉jQuery不要去设置Content-Type请求头
                            contentType: false,
                            success: function (res) {
                                layer.closeAll();
                                if (res.code == 200) {
                                    layer.msg(res.msg, {icon: 1});
                                    table.reload('withdrawalTable')
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                }
                            }
                        })
                    })

                    $('#transferClose').click(function () {
                        layer.close(index);
                    })
                }
            })


        })

    })
</script>
</html>
